<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="w-full h-full box-border bg-white p-[20px]" ref="RefLayout">
        <div class="search box-border pb-[20px]">
          <a-row justify="space-between">
            <a-col :span="12">
              <span class="flex justify-start items-center">
                <a-input-search v-model="filterData.number" placeholder="请输入批次编号关键字" allow-clear style="width: 328px"
                  @clear="serchChange" @change="serchChange" @search="serchChange">
                </a-input-search>
                <a-button class="ml-2" @click="moreFilterKey = !moreFilterKey">
                  <template #icon>
                    <icon-filter style="color: #1459fa" />
                  </template>
                </a-button>
              </span>
            </a-col>
            <span>
              <a-button type="primary" @click="$router.push({ name: 'registerUpload' })">上传证书</a-button>
            </span>
          </a-row>
          <div
            class="more-fliter-box w-full h-[120px] mt-[20px] mb-0 p-[20px] pl-[10px] pr-[10px] box-border bg-[#F7F9FC]"
            v-if="moreFilterKey">
            <a-row class="w-full h-[40px] overflow-hidden" justify="start">
              <a-col :span="8">
                <a-input v-model="filterData.name" allow-clear placeholder="请输入" @change="serchChange">
                  <template #prefix>批次名称</template>
                </a-input>
              </a-col>
              <a-col :span="8">
                <a-input v-model="filterData.uploader" allow-clear placeholder="请输入" @change="serchChange">
                  <template #prefix>上传人</template>
                </a-input>
              </a-col>
              <a-col :span="8">
                <a-range-picker v-model="uploadDateRange" style="width: 100%" @change="serchChange">
                  <template #prefix> 上传日期 </template>
                </a-range-picker>
              </a-col>
            </a-row>
            <a-row class="w-full h-[40px] overflow-hidden" justify="start">
              <a-col :span="8">
                <a-range-picker v-model="updataDateRange" style="width: 100%" @change="serchChange">
                  <template #prefix> 更新日期 </template>
                </a-range-picker>
              </a-col>
              <a-col :span="8">
                <a-link @click="resetForm">重置</a-link>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="table-box w-full" :style="{
          height: 'auto',
          maxHeight: moreFilterKey ? 'calc(100% - 192px)' : 'calc(100% - 92px)'
        }">
          <CommonTable :tableData="list" :columnsData="columns" :operatorData="operatorData" :pageTotal="page.total"
            :operatorCollapse="2" @handlerOperator="handlerOperator" @handlerPaginationChange="handlerPaginationChange">
          </CommonTable>
        </div>
      </div>
      <a-modal v-model:visible="removePopKey" title-align="start" class="zc-delete-box">
        <template #title> 是否确认删除该资产 </template>
        <div class="zc-delete-info-box">
          <icon-exclamation-circle-fill class="text-red-600" />
          删除后该资产无法恢复
        </div>
        <template #footer>
          <div class="w-full h-full flex justify-end items-center">
            <a-button @click="removePopKey = false">取消</a-button>
            <a-button type="primary" class="ml-2" @click="toRemove">删除</a-button>
          </div>
        </template>
      </a-modal>
    </template>
  </PageMain>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Message } from '@arco-design/web-vue';
import { columns, operatorData } from './values'
import {
  registration_list,
  registration_delete
} from '@/api/resource_registration/resource_registration';
import * as api from '@/api/compliance_registration/resource_registration/resource_registration';
import { useRouter } from 'vue-router';
const router = useRouter();
const RefLayout = ref();
/**
 * @method 表单筛选元素
 */
const filterData = ref<RegistrationList>({
  name: '',
  number: '',
  update_end_date: '',
  update_start_date: '',
  upload_end_date: '',
  upload_start_date: '',
  uploader: ''
});
const uploadDateRange = ref(['', '']); // 上传时间
const updataDateRange = ref(['', '']); // 更新时间
const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const moreFilterKey = ref(false);
const regId = ref(0);
/**
 * @method table表格的数据
 */
const list = ref([]);
/**
 * 资产列表
 */
const getList = async () => {
  let update_start_date = '', update_end_date = '', upload_start_date = '', upload_end_date = '';
  if (!uploadDateRange.value) {
    upload_start_date = '';
    upload_end_date = '';
  }else{
    upload_start_date = uploadDateRange.value[0];
    upload_end_date = uploadDateRange.value[1];
  }
  if (!updataDateRange.value) {
    update_start_date = '';
    update_end_date = '';
  }else{
    update_start_date = updataDateRange.value[0];
    update_end_date = updataDateRange.value[1];
  }
  const params = {
    page: page.value.page,
    page_size: page.value.page_size,
    name: filterData.value.name,
    number: filterData.value.number,
    update_end_date,
    update_start_date,
    upload_end_date,
    upload_start_date,
    uploader: filterData.value.uploader
  };
  let res = await api.resReglist(params);
  console.log(res)
  // registration_list(params).then((res) => {
  //   const { code, data, total } = res;
  //   if (code === 200 && data) {
  //     list.value = data;
  //     page.value.total = total;
  //   } else {
  //     Message.error(res.message);
  //   }
  // });
};
const removePopKey = ref(false);
function deleteAsset(id: number) {
  removePopKey.value = true;
  regId.value = id;
}

/* 列表操作 */
const handlerOperator = (record: any, key: string) => {
  if (key.label == '查看证书') {
    router.push({ name: 'registerCheck', query: { id: record.id } })
  } else if (key.label == '删除') {
    deleteAsset(record.id)
  }
}
// 删除
const toRemove = () => {
  removePopKey.value = false;
  registration_delete({ id: regId.value }).then((res) => {
    if (res.code === 200) {
      Message.success('删除成功');
    }
    getList();
  });
};
// 清空参数
const resetForm = () => {
  filterData.value = {
    name: '',
    number: '',
    update_end_date: '',
    update_start_date: '',
    upload_end_date: '',
    upload_start_date: '',
    uploader: ''
  };
  uploadDateRange.value = ['', ''];
  updataDateRange.value = ['', ''];
  getList();
};
// 搜索
const serchChange = () => {
  getList();
};

/* 分页方法 */
const handlerPaginationChange = (type: string, num: number) => {
  if (type === 'num') {
    page.value.page = num;
  } else {
    page.value.page = 1;
    page.value.page_size = num;
  }
  getList();
}
onMounted(() => {
  getList();
});
</script>
<style lang="less">
.arco-input-wrapper,
.arco-select-view-single,
.arco-picker,
.arco-textarea {
  background: #fff;
  border: 1px solid #d3dbeb;
  border-radius: 4px;
}

.flex-right {
  .arco-table-cell {
    padding-right: 0;
  }
}

.zc-delete-box {
  .arco-modal-wrapper {
    .arco-modal {
      .arco-modal-header {
        border-bottom: 0 !important;

        .arco-modal-title {
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: bold;
          line-height: 24px;
          color: #394d73;
        }

        .arco-modal-close-btn {
          color: #a3b0cc;
          font-size: 20px;
        }
      }

      .arco-modal-footer {
        border-top: 0 !important;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.more-fliter-box {
  .arco-row {
    .arco-col {
      @apply h-full flex justify-start items-center;
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
}

.filter-btn {
  width: 37px !important;
  background: #f0f4fa;

  :deep(.arco-icon) {
    color: #a3b0cc;
  }
}

.zc-delete-info-box {
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  color: #465a80;

  :deep(.arco-icon) {
    color: #ffac38;
    font-size: 17px;
  }
}
</style>
